/**
 * Created by chesw on 2017/5/12.
 * describe：我的就诊人
 */
var myDiagnosis = Vue.extend({
    props: [],
    data: function () {
        return {
            showAdd: false,
            addBtn: 'add-btn',
            reduceBtn: 'reduce-btn',
            df: 'default',
            dfBtn: 'default-btn',
            list: [],
            editName: '',
            editPhone: '',
            editCode: '',
            editCard: '',
            editDefault: false
        }
    },
    created: function () {
        this.list = [
            {name: '张三', sex: '男', age: '54', phone: '158954754124', card: '1154654654564564', is_default: true, id: 1, cls: ''},
            {name: '李四', sex: '男', age: '34', phone: '158954752154', card: '1154654654564564', is_default: false, id: 2, cls: 'efefef'},
            {name: '王麻子', sex: '男', age: '33', phone: '158954756669', card: '1154654654564564', is_default: false, id: 3, cls: ''},
            {name: '六斤', sex: '男', age: '76', phone: '158954758475', card: '1154654654564564', is_default: false, id: 4, cls: 'efefef'},
            {name: '八两', sex: '男', age: '32', phone: '158954754188', card: '1154654654564564', is_default: false, id: 5, cls: ''},
            ]
    },
    methods: {
        clickAdd: function (p_type, p_index) {
            this.showAdd = !this.showAdd;
            this.editName = '';
            this.editPhone = '';
            this.editCard = '';
            this.editDefault = false;
            console.log(p_index);

            if(p_type == 2) {
                this.editName = this.list[p_index].name;
                this.editPhone = this.list[p_index].phone;
                this.editCard = this.list[p_index].card;
                this.editDefault = this.list[p_index].is_default;
            }
        },
        save: function () {
            var obj = {
                name: this.editName,
                phone: this.editPhone,
                card: this.editCard,
                is_default: this.editDefault
            };
            this.list.unshift(obj);
            this.showAdd = false;
            dialogTip({url: '../image/icon/ok.png', text: '添加成功'});
        },
        cancel: function () {
            this.showAdd = false;
        },
        del: function (p_index) {
            var _this = this;
            var param = {
                text: '该操作不可撤销，是否确认删除该就诊人',
                l_val: '确认',
                r_val: '取消',
                type: true,
                left_func: function () {
                    _this.$parent.confirm.type = false;
                    _this.list.splice(p_index, 1);
                }
            };
            this.$emit('del', param);
        }
    },
    template: '<div class="my-diagnosis">' +
        '<div class="add-diagnosis">' +
            '<div class="btn-title" :class="[showAdd ? addBtn : reduceBtn]" @click="clickAdd(1)">新增就诊人</div>' +
            '<div class="add-content" v-if="showAdd">' +
                '<div class="diagnosis-style flex">' +
                    '<span class="label-cls">就诊人姓名</span>' +
                    '<span class="input-cls normal-input-cls">' +
                        '<input class="normal-input" type="text" placeholder="就诊人名称" v-model="editName">' +
                        '<i class="x-icon"></i>' +
                    '</span>' +
                    '<span class="required">*</span>' +
                '</div>' +
                '<div class="diagnosis-style flex">' +
                    '<span class="label-cls">手机号</span>' +
                    '<span class="input-cls normal-input-cls">' +
                        '<input class="normal-input" type="tel" maxlength="11" placeholder="手机号" v-model="editPhone">' +
                        '<i class="x-icon"></i>' +
                    '</span>' +
                    '<span class="required">*</span>' +
                '</div>' +
                '<div class="diagnosis-style flex">' +
                    '<span class="label-cls">验证码</span>' +
                    '<span class="input-cls code-input-cls">' +
                        '<input class="code-input" type="tel" maxlength="6" placeholder="验证码" v-model="editCode">' +
                        '<i class="x-icon"></i>' +
                    '</span>' +
                    '<span class="code-btn">获取验证码</span>' +
                    '<span class="required">*</span>' +
                '</div>' +
                '<div class="diagnosis-style flex">' +
                    '<span class="label-cls">证件号</span>' +
                    '<span class="input-cls normal-input-cls">' +
                        '<input class="normal-input" type="text" placeholder="证件号" v-model="editCard">' +
                        '<i class="x-icon"></i>' +
                    '</span>' +
                    '<span class="required">*</span>' +
                '</div>' +
                '<div class="bottom-btn">' +
                    '<span class="checkbox"><input type="checkbox" v-model="editDefault">&nbsp;&nbsp;设置默认就诊人</span>' +
                    '<span class="btn save" @click="save">保存</span>' +
                    '<span class="btn cancel" @click="cancel">取消</span>' +
                '</div>' +
            '</div>' +
        '</div>' +
        '<div class="diagnosis-list">' +
            '<div class="md-title flex">' +
                '<p class="md-name">姓名</p>' +
                '<p class="md-sex">性别</p>' +
                '<p class="md-age">年龄</p>' +
                '<p class="md-phone">手机号</p>' +
                '<p class="md-id-card">身份证</p>' +
                '<p class="md-operate">操作</p>' +
                '<p class="md-set-default"></p>' +
            '</div>' +
            '<div class="md-content flex" :class="item.cls" v-for="(item, index) in list">' +
                '<p class="md-name">{{item.name}}</p>' +
                '<p class="md-sex">{{item.sex}}</p>' +
                '<p class="md-age">{{item.age}}</p>' +
                '<p class="md-phone">{{item.phone}}</p>' +
                '<p class="md-id-card">{{item.card}}</p>' +
                '<p class="md-operate"><span @click="clickAdd(2, index)">修改&nbsp;</span>|<span @click="del(index)">&nbsp;删除</span></p>' +
                '<p class="md-set-default"><span :class="[item.is_default ? df : dfBtn]">{{item.is_default ? "默认诊断人" : "设置默认"}}</span></p>' +
            '</div>' +
        '</div>' +
    '</div>'
});